<template>
	<view class="container">
		<view class="headerSearch">
			<div class=" search flex flex-align">
				<tui-icon name="search" color="#ccc" :size="18"></tui-icon>
				<input type="text" v-model="inputVal" placeholder="请输入关键词搜索商品"/>
				<button @click="search">搜索</button>
			</div>
			
		</view>
		<view style="height: 130rpx;"></view>
		<view class="orderList">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="title">{{item.goods_name}}</view>
				<view class="guige" v-if="item.goods_spec">{{item.goods_spec}}</view>
				<view class="listFlex flex flex-align flex-line">
					<view class="flex1">
						<view class="wenzi">订单总量</view>
						<view class="num">{{item.order_sum}}</view>
					</view>
					<view class="flex1">
						<view class="wenzi">待核销订单</view>
						<view class="num">{{item.order_sum7}}</view>
					</view>
					<view class="flex1">
						<view class="wenzi">已核销订单</view>
						<view class="num">{{item.order_sum9}}</view>
					</view>
					<view class="flex1">
						<view class="wenzi">总金额</view>
						<view class="num">{{item.order_amount}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				inputVal:'',
				id:'',
				dataList:[],
				page:1
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getData()
		},
		onShow() {
			
		},
		onReachBottom() {
			let that = this
			that.page++
			that.getData()
		},
		methods: {
			search(){
				this.page=1
				this.dataList=[]
				this.getData()
			},
			getData(){
				let that = this
				that.tui.request('api.auth.live/hexInfo', "POST", {page:that.page,keyword:that.inputVal}, false, false, false).then((res) => {
					if(res.code==1){
						that.dataList = that.dataList.concat(res.data.list)
					}
				}).catch((res) => {
				
				})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #F5F6F7;}
	.headerSearch{box-sizing: border-box;position: fixed;top: 0;left: 0;width: 100%;padding-top: 30rpx;background: #F5F6F7 ;
		.search{margin: 0 30rpx 30rpx;
			border: 2px solid #FE7431;border-radius: 60rpx;padding: 0 20rpx;
			button{background: transparent;color: #FE7431;height: 70rpx;line-height: 70rpx;font-size: 14px;}
			input{width: 75%;padding-left: 10rpx;}
		}
	}
	.orderList{padding-bottom: 20rpx;
		.list{background: #fff;border-radius: 15rpx;padding: 30rpx;margin: 30rpx 30rpx 20rpx;
			.title{font-size: 18px;font-weight: bold;margin-bottom: 10rpx;}
			.guige{font-size: 12px;color: #969799;}
			.listFlex{background: #F3F4F7;padding: 30rpx 0 0;text-align: center;border-radius: 10rpx;margin-top: 30rpx;
				.wenzi{margin-bottom: 16rpx;color: #969799;}
				.num{color: #323233;font-size: 15px;font-weight: bold;}
			}
			.flex1{width: 50%;margin-bottom: 30rpx;}
		}
	}
</style>
